<script>
import axios from "axios";

export default {
  name: "carouselQ",
  data(){
    return{
      imgSrc:'',
      imgList:[],
    }
  },
  methods:{

  },
  created() {
    axios.get('/api/weChat/applet/course/banner/list?number=5').then(res=>{
      console.log(res)
      // this.imgSrc = res.data.data[0].imgUrl;
      this.imgList = res.data.data;
    })
  }
}

</script>

<template>
<div class="carousel">
  <div class="w">
    <a-carousel autoplay>
      <div class="lunBoTu" v-for="item in imgList" :key="item.id"><h3><img :src="item.imgUrl" alt=""></h3></div>
    </a-carousel>
    <div class="lub-bottom">
      <p>仅需198即可观看所有付费课程</p>
      <button>开通VIP</button>
    </div>
  </div>
</div>
</template>

<style scoped lang="css">
* {
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}
li{
  list-style: none;
}
.w {
  width: 1200px;
  margin: 0 auto;

}
.carousel {
  margin-top: -50px;
  border-radius: 20px;
  padding: 10px;
  overflow: hidden;
}
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 400px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
.lunBoTu img {
  width: 100%;
}
.lub-bottom {
  height: 50px;
  background-image: url(../assets/vip-line.f590fe35.png);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  /* text-align: center; */
}
.lub-bottom button {
  margin-left: 10px;
  color: white;
  background-color: saddlebrown;
  width: 80px;
  height: 30px;
  border-radius: 15px;
}
</style>